import styled from 'styled-components'

export const CityListWrap = styled.div `
    .wrapper {
        height: 7rem !important;
        overflow: hidden;
    }
    .city-nav {
        position: fixed;
        right: .1rem;
        top: 1.2rem;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        z-index: 1;
        .nav {
            font-size: .1rem;
            color: #666;
            margin-bottom: .03rem;
            width: 100%;
            text-align: center;
        }
        .active {
            color: #ff4763;
        }
    }
    header {
        padding: 0 .15rem;
        position: fixed;
        line-height: .44rem;
        text-align: center;
        width: 100%;
        height: .44rem;
        background: #fff;
        border-bottom: 1px solid #ebebeb;
        z-index: 100;
        img {
            width: .2rem;
            height: .2rem;
            position: absolute;
            top: .12rem;
            display: inline-block;
            left: .15rem;
        }
        h3 {
            font-size: .18rem;
            color: #232323;
            font-weight: normal;
        }
    }
    .main {
        background: rgb(245,245,245);
        padding: .13rem 0 0 0;
        .dingwei {
            margin-top: .4rem;
        }
        span {
            font-size: .12rem;
            color: #999;
            display: flex;
            height: .26rem;
            -webkit-box-align: center;
            align-content: center;
            /* margin-bottom: .05rem; */
            padding: 0 .38rem 0 .15rem;
        }
        ul {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            padding: 0 .38rem 0 .15rem;
            .city {
                width: auto;
                height: .36rem;
                min-width: 1rem;
                padding: 0 .075rem;
                box-sizing: border-box;
                border: 1px solid #ebebeb;
                background-color: #fefefe;
                border-radius: .03rem;
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-pack: center;
                justify-content: center;
                font-size: .13rem;
                color: #232323;
                margin-right: .075rem;
                width: 27.2%;
            }
            .special {
                width: 1.4rem;
            }
            .city1 {
                margin-bottom: .075rem;
                width: 31.67%;
                height: .35rem;
                line-height: .35rem;
                border: 1px solid #ebebeb;
                background-color: #fefefe;
                border-radius: .03rem;
                display: flex;
                flex-wrap: wrap;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-pack: center;
                justify-content: center;
                font-size: .13rem;
                color: #232323;
            }
            .city1:nth-child(3n+1) {
                margin-right: .075rem;
            }
            .city1:nth-child(3n+2) {
                margin-right: .075rem;
            }
        }
        .sort {
            .content {
                .py {
                    height: .29rem;
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;
                    font-size: .13rem;
                    color: #999;
                }
                ul {
                    background-color: #fefefe;
                    display: flex;
                    padding: 0 .38rem 0 .15rem;
                    flex-direction: column;
                    .sortcity {
                        height: .5rem;
                        display: flex;
                        -webkit-box-align: center;
                        align-items: center;
                        font-size: .13rem;
                        color: #232323;
                        border-bottom: 1px solid #ebebeb;
                    }
                    li:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    }
    
`

export const SearchWrap = styled.div `
    background-color: rgb(254,254,254);
    height: 100%;
    .sc-bwzfXH {
        height: 100%;
        background: rgb(254,254,254);
    }
    header {
        height: .44rem;
        width: 100%;
        padding: 0 .15rem;
        box-sizing: border-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        position: fixed;
        z-index: 10;
        background-color: #fefefe;
        div {
            width: 86%;
            height: .3rem;
            background-color: #f5f5f5;
            border-radius: .15rem;
            box-sizing: border-box;
            padding: 0 .085rem 0 .14rem;
            border: 1px solid #ebebeb;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            span:nth-child(1) {
                img {
                    width: .2rem;
                    height: .2rem;
                    display: block;
                }
            }
            input {
                height: .2rem;
                line-height: .2rem;
                width: 82%;
                font-size: .13rem;
                letter-spacing: 0;
                color: #232323;
                border: none;
                background-color: #f5f5f5;
            }
            span:nth-child(3) {
                img {
                    height: .2rem;
                    line-height: .2rem;
                    width: .2rem;
                    display: block;
                }
            }
        }
        .cancle {
            font-size: .14rem;
            color: #666;
        }
    }
    .wrapper {
        height: 7rem;
        overflow: hidden;
        .content {
            .hhh {
                display: flex;
                padding: 0 0 .2rem .15rem;
                img {
                    width: 28%;
                }
                .jjj {
                    margin-left: .15rem;
                    width: 60%;
                    div:nth-child(1) {
                        font-size: .16rem;
                        color: #232323;
                        font-weight: 700;
                    }
                    div:nth-child(2) {
                        font-size: .16rem;
                        color: #232323;
                        font-weight: 700;
                        height: .46rem;
                        line-height: .23rem;
                        overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    div:nth-child(3) {
                        font-size: .12rem;
                        color: #666;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        height: .14rem;
                        line-height: .14rem;
                        margin-top: .02rem;
                        margin-bottom: .02rem;
                    }
                    div:nth-child(4) {
                        span {
                            color: #ff6743;
                            font-size: .12rem;
                            background: #fff1ef;
                            display: inline-block;
                            margin-right: .05rem;
                            border-radius: .09rem;
                        }
                    }
                    div:nth-child(5) {
                        color: #ff6743;
                        font-size: .16rem;
                        font-weight: 700;
                        span {
                            font-size: .12rem;
                            color: #999;
                            font-weight: normal;
                        }
                    }
                }
            }
            .hhh:nth-child(1) {
                padding-top: .5rem;
            }
            .default-wrap {
                padding: .56rem .15rem 0;
                h3 {
                    font-weight: normal;
                    color: #666;
                    font-size: .13rem;
                    display: block;
                    height: .2rem;
                    line-height: .2rem;
                }
                ul {
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-box-direction: normal;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-top: .2rem;
                    li {
                        padding: 0 .25rem;
                        margin: 0 .1rem .1rem 0;
                        height: .35rem;
                        line-height: .35rem;
                        color: #232323;
                        background-color: #f5f5f5;
                        border-radius: .03rem;
                    }
                }
            }
            .notfound {
                margin-top: .88rem;
                text-align: center;
                img {
                    width: .9rem;
                    height: .65rem;
                    margin: 0 auto;
                }
                p {
                    font-size: .13rem;
                    color: #999;
                    height: .2rem;
                    line-height: .2rem;
                    margin-top: .2rem;
                }
            }
        }
    }
`

export const CalendarWrap = styled.div `
    background-color: #fff;
    header {
        height: .44rem;
        padding-left: .11rem;
        position: fixed;
        top: 0;
        z-index: 100;
        background-color: #fff;
        width: 100%;
        font-size: .18rem;
        border-bottom: 1px solid #ebebeb;
        box-sizing: border-box;
        i {
            display: inline-block;
            transform: rotate(180deg);
            line-height: .44rem;
        }
        span {
            position: absolute;
            text-align: center;
            height: .44rem;
            line-height: .44rem;
            left: 0;
            right: 0;
        }
        .title_nav-wrapper {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            .title_nav {
                display: flex;
                align-items: center;
                padding-right: .07rem;
                img {
                    padding: .11rem .075rem;
                    width: .32rem;
                }
            }
        }
    }
    .middle {
        display: flex;
        padding: .1rem 0 .1rem .15rem;
        background-color: #fefefe;
        position: fixed;
        left: 0;
        top: .44rem;
        z-index: 1;
        width: 100%;
        box-sizing: border-box;
        .left {
            -webkit-box-flex: 1;
            flex: 1;
            width: 2.4rem !important;
            margin-right: .05rem;
            overflow: hidden;
            ul {
                display: flex;
                white-space: nowrap;
                width: 6.6rem;
                li {
                    font-size: .15rem;
                    padding: 0 .05rem;
                    /* border-bottom: .015rem solid; */
                    border-radius: .01rem;
                    height: .24rem;
                    line-height: .24rem;
                    margin-right: .15rem;
                }
                .active {
                    color: #ff6743;
                    border-color: #ff6743;
                }
            }
        }
        .right {
            width: 20%;
            border-left: .01rem solid #e0e0e0;
            font-size: .15rem;
            color: #666;
            height: .14rem;
            line-height: .14rem;
            margin-top: .05rem;
            text-align: center;
            span:nth-child(2) {
                display: inline-block;
                width: .11rem;
                height: .13rem;
                img {
                    width: .11rem;
                    height: .13rem;
                    margin-left: .02rem;
                }
            }
        }
    }
    .calendar-wrap {
        overflow: hidden;
        height: 7rem;
        width: 100%;
        position: fixed;
        left: 0;
        top: .88rem;
        bottom: 0;
        background: #fff;
        .content {
            .calendar_com {
                margin-top: .88rem;
                border-bottom: 1px solid #ebebeb;
                box-shadow: 0 .02rem .15rem .01rem rgba(36,36,36,0.08);
                .calendar-header {
                    display: flex;
                    justify-content: space-between;
                    padding: .14rem .12rem;
                    height: .47rem;
                    border-top: 1px solid #f5f5f5;
                    li {
                        list-style: none;
                    }
                    li:nth-child(1) {
                        display: flex;
                        font-size: .18rem;
                        flex: 1;
                        justify-content: center;
                        align-items: center;
                        transform: rotate(180deg)
                    }
                    li:nth-child(2) {
                        flex: 2.5;
                        color: #242424;
                        font-size: .14rem;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                    }
                    li:nth-child(3) {
                        display: flex;
                        font-size: .18rem;
                        flex: 1;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .calendar-body {
                    .week-container {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        margin-bottom: .1rem;
                        height: .4rem;
                        line-height: .4rem;
                        background-color: #f5f5f5;
                        .week {
                            &:nth-child(6),&:nth-child(7) {
                                color: #ff6743;
                            }
                            width: 14.2%;
                            display: inline-block;
                            text-align: center;
                        }
                    }
                    .day-container {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        .day {
                            width: 14.2%;
                            display: inline-block;
                            text-align: center;
                            height: .4rem;
                            line-height: .4rem;
                            &:nth-child(7n-1) {
                                color: #ff6743;
                            }
                            &:nth-child(7n) {
                                color: #ff6743;
                            }
                            &.today {
                                color: yellowgreen;
                            }
                        }
                        .daytoday {
                            width: 14.2%;
                            height: .4rem;
                            line-height: .4rem;
                            display: inline-block;
                            text-align: center;
                            background-color: rgba(253, 181, 146, 0.5)!important;
                            color: #ff6743;
                            border-radius: 50%;
                        }
                    }
                }
            }
            .recommend-wrap {
                padding-top: .3rem;
                .hhh {
                    display: flex;
                    padding: 0 0 .2rem .15rem;
                    img {
                        width: 28%;
                    }
                    .jjj {
                        margin-left: .15rem;
                        width: 60%;
                        div:nth-child(1) {
                            font-size: .16rem;
                            color: #232323;
                            font-weight: 700;
                        }
                        div:nth-child(2) {
                            font-size: .16rem;
                            color: #232323;
                            font-weight: 700;
                            height: .46rem;
                            line-height: .23rem;
                            overflow : hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        div:nth-child(3) {
                            font-size: .12rem;
                            color: #666;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: .14rem;
                            line-height: .14rem;
                            margin-top: .02rem;
                            margin-bottom: .02rem;
                        }
                        div:nth-child(4) {
                            span {
                                color: #ff6743;
                                font-size: .12rem;
                                background: #fff1ef;
                                display: inline-block;
                                margin-right: .05rem;
                                border-radius: .09rem;
                            }
                        }
                        div:nth-child(5) {
                            color: #ff6743;
                            font-size: .16rem;
                            font-weight: 700;
                            span {
                                font-size: .12rem;
                                color: #999;
                                font-weight: normal;
                            }
                        }
                    }
                }
                .hhh:last-child {
                    padding-bottom: 1.4rem;
                }
            }
        }
    }

`

export const HeaderWrap = styled.div `
    height: .44rem;
    width: 100%;
    padding: 0 .15rem;
    position: absolute;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 10;
    div:first-child {
        width: .585rem;
        height: .28rem;
        border-radius: .18rem;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        background-color: rgba(0,0,0,.3);
        border: 1px solid rgba(225,225,225,.3);
        img {
            width: .11rem;
            height: .13rem;
            vertical-align: middle;
        }
        span {
            color: #fefefe;
            font-weight: 700;
            margin-left: .03rem;
            font-size: .15rem;
        }
    }
    div:nth-child(2) {
        width: 2.115rem;
        height: .28rem;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        border: 1px solid rgba(225,225,225,.2);
        background-color: rgba(0,0,0,.2);
        border-radius: .2rem;
        margin-left: .04rem;
        img {
            width: .2rem;
            height: .2rem;
            margin: 0 .05rem 0 .11rem;
            vertical-align: middle;
        }
        span {
            font-size: .13rem;
            color: #fefefe;
        }
    }
    .cal {
        width: .27rem;
        height: .25rem;
        img {
            vertical-align: middle;
            width: 100%;
            height: 100%;
        }
    }
`

export const SwiperWrap = styled.div `
    img {
        width: 100%;
        height: 52.2667vw !important;
    }
`

export const NavWrap = styled.div `
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: #fff;
    figure {
        width: 20%;
        margin: 0 0 0 0;
        margin-top: .05rem;
        margin-bottom: .15rem;
        img {
            margin-left:15%;
            width: 70%;
            vertical-align: middle;
        }
        figcaption {
            display: flex;
            flex-direction: column;
            h4 {
                font-weight: normal;
                text-align: center;
                font-size: .13rem;
            }
        }
    }
`

export const HotListWrap = styled.div `
    background: #fff;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-left:.2rem;
    position: relative;
    header {
        display: flex;
        font-size: .19rem;
        margin-bottom: .1rem;
        font-weight: 700;
    }
    span {
        position: absolute;
        right: .2rem;
        top: 0;
        font-size: .2rem;
        color: #ccc;
    }
    > div {
        display: flex;
        overflow-x: scroll;
        figure {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 0;
            img {
                width: 1.07rem;
                height: 1.46rem;
                vertical-align: middle;
                margin-right: .05rem;
            }
            figcaption {
                .hhh {
                    font-size: .15rem;
                    width: 100%;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    word-break: break-all;
                    margin-top: .08rem;
                    margin-bottom: .2rem;
                    font-family: "Avenir", Helvetica, Arial, sans-serif;
                }
            }
        }
    }

`

export const TourWrap = styled.div `
    position: relative;
    padding-left: .2rem;
    > div {
        header {
            margin: .1rem 0 .1rem 0;
            font-size: .19rem;
            font-weight: 700;
        }
        span {
            position: absolute;
            right: .2rem;
            top: -.03rem;
            font-size: .2rem;
            color: #ccc;
        }
    }
    .item {
        display: flex;
        overflow-x: scroll;
        figure {
            margin: 0 0 0 0;
            img {
                width: 2.45rem;
                height: 1.4rem;
                margin-right: .1rem;
            }
            figcaption {
                h4 {
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 2.45rem;
                    margin: .1rem 0 .04rem 0;
                }
                p {
                    text-align: center;
                    font-size: .13rem;
                    color: #666;
                }
            }
        }
    }
`

export const VipWrap = styled.div `
    header {
        width: 100%;
        height: .4rem;
        background: rgba(25,18,6);
        color: rgba(228,198,166);
        display: flex;
        justify-content: space-between;
        div:first-child {
            display: flex;
            align-items: center;
            span:nth-child(1) {
                margin-left: .2rem;
                img {
                    width: .2rem;
                    height: .18rem;
                    margin-right: .04rem;
                    line-height: .4rem;
                    margin-top: -.04rem;
                }
            }
            span:nth-child(2) {
                font-size: .15rem;
                font-weight: 700;
                height: .4rem;
                line-height: .4rem;
                
            }
        }
        div:last-child {
            display: flex;
            align-items: center;
            margin-right: .2rem;
            span {
                display: flex;
                font-size: .14rem;
            }
        }
    }
    .middle {
        padding: 0 .15rem;
        display: flex;
        background-color: #f5f5f5;
        justify-content: space-between;
        div:first-child {
            width: 62%;
            h3 {
                display: flex;
                justify-content: space-between;
                span {
                    font-size: .15rem;
                    display: flex;
                    justify-content: space-between;
                    margin-top: .08rem;
                    margin-bottom: .05rem;
                }
            }
            .pic {
                display: flex;
                figure {
                    margin: 0 0 0 0;
                    text-align: center;
                    img {
                        width: 1.06rem;
                        height: 1.46rem;
                    }
                    figcaption {
                        span {
                            text-align: center;
                            color: #ff6743;
                            font-size: .18rem;
                        }
                        del {
                            text-decoration: line-through;
                            color: #999;
                            font-size: .12rem;
                        }
                    }
                }
            }
        }
        div:last-child {
            width: 33%;
            /* margin-left: .1rem; */
            h3 {
                margin-top: .08rem;
                margin-bottom: .05rem;
                display: flex;
                justify-content: space-between;
                /* margin-left: .1rem; */
                span {
                    display: flex;
                    justify-content: space-between;
                }
            }
            .dis {
                figure {
                    margin:0 0 0 0;
                    img {
                        width: 1.06rem;
                        height: 1.46rem;
                    }
                    figcaption {
                        display: flex;
                        padding-left: .12rem;
                        span:nth-child(1) {
                            color: #ff6743;
                            font-size: .18rem;
                        }
                        span:last-child {
                            font-size: .12rem;
                            color: #999;
                            height: .28rem;
                            line-height: .28rem;
                        }
                    }
                }
            }
        }
    }
    
`

export const ConcertWrap = styled.div `
    background: #fff;
    .head {
        display: flex;
        margin-left: .2rem;
        margin-right: .2rem;
        justify-content: space-between;
        header {
            padding-top: .1rem;
            font-size: .19rem;
            font-weight: 700;
            margin-bottom: .1rem;
        }
        span {
            font-size: .18rem;
            color: #ccc;
            height: .4rem;
            line-height: .4rem;
        }
    }
    .top {
        width: 100%;
        height: 1.66rem;
        background: rgb(80, 47, 48);
        display: flex;
        .hhh {
            padding: .13rem 0 .13rem .14rem;
            display: flex;
            div:first-child {
                img {
                    width: 1rem;
                    height: 1.36rem;
                }
                p {
                    margin-left: .15rem;
                }
            }
            div:last-child {
                margin-left: .15rem;
                p:nth-child(1) {
                    color: #fff;
                    font-size: .16rem;
                    font-weight: 700;
                    padding-top: .16rem;
                    letter-spacing: .01rem;
                    height: .24rem;
                    line-height: .24rem;
                    span {
                        font-size: .12rem;
                        margin-left: .02rem;
                    }
                }
                h3 {
                    width: 90%;
                    font-size: .16rem;
                    margin-top: .2rem;
                    height: .22.5rem;
                    max-height: .45rem;
                    min-height: .22.5rem;
                    color: #fff;
                    font-weight: 700;
                    text-overflow:ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                p:last-child {
                    color: #fff;
                    font-size: .12rem;
                    height: .24rem;
                    line-height: .24rem;
                    margin-top: .1rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
    .foot {
        display: flex;
        overflow-x: scroll;
        padding-left: .15rem;
        margin-top: .1rem;
        flex-wrap: nowrap;
        figure {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 0;
            margin-right: .04rem;
            img {
                width: 1.07rem;
                height: 1.46rem;
            }
            figcaption {
                h4 {
                    width: 1.07rem;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    font-size: .15rem;
                    margin-top: .12rem;
                    color: #232323;
                }
                .num {
                    font-size: .16rem;
                    color: #ff6743;
                }
                span {
                    font-size: .12rem;
                    color: #999;
                    margin-left: .02rem;
                }
            }
        }
    }
`

export const HotVenueWrap = styled.div `
    background: #fff;
    .head {
        margin-top: .1rem;
        display: flex;
        margin: 0 .2rem;
        justify-content: space-between;
        header {
            font-size: .19rem;
            font-weight: 700;
            height: .4rem;
            line-height: .4rem;
        }
        span {
            font-size: .18rem;
            color: #ccc;
            height: .4rem;
            line-height: .4rem;
        }
    }
    .nimade {
        display: flex;
        overflow-x: scroll;
        .slider {
            .slider-frame {
                .slider-list {
                    width: 2.64rem !important;
                }
            }
        }
        .main {
            width: 2.64rem;
            background: #fefefe;
            border-radius: .04rem;
            border: 1px solid #ebebeb;
            box-shadow: 0 .02rem .15rem .01rem rgba(35,35,35,0.08);
            margin-bottom: .15rem;
            padding: .2rem .17rem;
            box-sizing: border-box;
            margin-right: .2rem;
            .first {
                display: flex;
                div:nth-child(1) {
                    img {
                        width: .5rem;
                        height: .5rem;
                    }
                } 
                div:nth-child(2) {
                    margin-left: .1rem;
                    width: 1.25rem;
                    span {
                        color: #232323;
                        font-size: .15rem;
                        font-weight: 700;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        width: 1.25rem;
                        display: block;
                    }
                    p {
                        margin-top: .075rem;
                        font-size: .1rem;
                        color: #666;
                        height: .15rem;
                        line-height: .15rem;
                    }
                }
                div:nth-child(3) {
                    img {
                        width: .14rem;
                        height: .14rem;
                    }
                }
        }
            .sb {
                display: flex;
                .second {
                    div {
                        p {
                            text-align: center;
                            margin-top: .1rem;
                            span:first-child {
                                font-size: 0.14rem;
                                color: #b3b3b3;
                                height: 0.17rem;
                                line-height: 0.17rem;
                            }
                            span:last-child {
                                display: block;
                                width: .07rem;
                                height: .07rem;
                                background-color: #ccc;
                                border-radius: 50%;
                                margin: .09rem auto 0;
                            }
                        }
                    }
                }
                img {
                    width: 1.07rem;
                    height: 1.46rem;
                    margin-top: .1rem;
                }
            }
        }
    }
`

export const ForyouWrap = styled.div `
    background: #fff;
    .head {
        margin-top: .1rem;
        display: flex;
        margin: 0 .2rem;
        justify-content: space-between;
        margin-bottom: .1rem;
        header {
            font-size: .19rem;
            font-weight: 700;
            height: .4rem;
            line-height: .4rem;
        }
        span {
            font-size: .18rem;
            color: #ccc;
            height: .4rem;
            line-height: .4rem;
        }
    }
    .main {
        .hhh {
            display: flex;
            padding: 0 0 .2rem .15rem;
            img {
                width: 28%;
            }
            .jjj {
                margin-left: .15rem;
                width: 60%;
                div:nth-child(1) {
                    font-size: .16rem;
                    color: #232323;
                    font-weight: 700;
                }
                div:nth-child(2) {
                    font-size: .16rem;
                    color: #232323;
                    font-weight: 700;
                    height: .46rem;
                    line-height: .23rem;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                div:nth-child(3) {
                    font-size: .12rem;
                    color: #666;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: .14rem;
                    line-height: .14rem;
                    margin-top: .02rem;
                    margin-bottom: .02rem;
                }
                div:nth-child(4) {
                    span {
                        color: #ff6743;
                        font-size: .12rem;
                        background: #fff1ef;
                        display: inline-block;
                        margin-right: .05rem;
                        border-radius: .09rem;
                    }
                }
                div:nth-child(5) {
                    color: #ff6743;
                    font-size: .16rem;
                    font-weight: 700;
                    span {
                        font-size: .12rem;
                        color: #999;
                        font-weight: normal;
                    }
                }
            }
        }
    }
`
